import Vue from 'vue';

const state = {
  svgBoxShow: false,
  whatTool: 1, // 1为颜色工具 2为图片工具 3为文字工具 4为模型选择工具 5为可变色图片工具
  svgKeys: {},
  whichSvg: '',
  imageToolShow: false,
  copyBoxShow: false,
  svgColorObj: {},
  choisePantone: { rgb: '', pantone: '' },
  pantoneBoxShow: false,
  canUndo: false,
  canRedo: false,
  imageTimes: {},
  changeText: false,
  textObj: {
    txt: '', // 文字
    font: '1', // 字体
    fill_color: '000000', // 字体颜色
    pantone1: 'Black 6C', // 字体颜色描述
    stroke: '', // 描边颜色
    strokewidth: '0', // 描边宽度
    pantone2: '', // 描边描述
    h: '150' // 高度
  }, // CURVE NORMAl
  colorTitle: 'Choose Your Colour', // Choose Your Colour , Font Colors
  fontShow: false,
  outlineShow: false,
  salt: 'SSFSlwm588ADF#$#SADFE#ASDFAS(*&D',
  pantoneData: [],
  latelyColor: JSON.parse(localStorage.getItem('latelyColor')) || [],
  smallScreen: false,
  title: 'Online Design',
  categoriesTabShow: true,
  canvasLoading: false,
  shadeState: 0, // 遮罩状态 0不显示 1显示帮助遮罩 2显示保存遮罩 3显示加载遮罩 //4显示离开警告遮罩 //5显示分享遮罩 //6显示加载其他模型警告遮罩
  shareUrl: '', // 分享地址
  commonColorBtn: false
};

const mutations = {
  initVue(state) {
    state.svgBoxShow = false;
    state.whatTool = 1;
    state.svgKeys = {};
    state.whichSvg = '';
    state.svgColorObj = {};
    state.choisePantone = { rgb: '', pantone: '' };
    state.canUndo = false;
    state.canRedo = false;
    state.imageTimes = {};
    state.textObj = {
      txt: '', font: '5', fill_color: '000033', stroke: '', strokewidth: '4', h: '150',
      pantone1: 'Black 6C', pantone2: ''
    };
    state.title = '';
    state.categoriesTabShow = true;
    state.shadeState = 0;
    state.commonColorBtn = false;
  },
  setSvgBoxShow(state, msg) {
    state.svgBoxShow = msg;
  },
  setWhatTool(state, msg) {
    state.whatTool = msg;
  },
  addSvgKeys(state, msg) {
    console.log('添加SVG');
    console.log(msg);
    var obj = {};
    obj.flag = msg.flag;
    obj.title = msg.title;
    Vue.set(state.svgKeys, msg.key, obj);
  },
  setWhichSvg(state, msg) {
    state.whichSvg = msg;
  },
  setImageToolShow(state, msg) {
    state.imageToolShow = msg;
  },
  setCopyBoxShow(state, msg) {
    state.copyBoxShow = msg;
  },
  addSvgColorOps(state, msg) {
    Vue.set(state.svgColorObj, msg, []);
  },
  pushSvgColor(state, msg) {
    state.svgColorObj[msg.key].push({ rgb: msg.rgb, pantone: msg.pantone });
  },
  changeSvgColor(state, msg) {
    var i = 0; var len = state.svgColorObj[msg.key].length; var flag = !!msg.color2;
    for (i; i < len && msg.color1; i++) {
      if (state.svgColorObj[msg.key][i].rgb === msg.color1) {
        state.svgColorObj[msg.key].splice(i, 1);
        len--;
        break;
      }
    }
    for (i = 0; i < len && msg.color2; i++) if (state.svgColorObj[msg.key][i].rgb === msg.color2.rgb) flag = false;
    if (flag) state.svgColorObj[msg.key].push(msg.color2);
  },
  setChoisePantone(state, msg) {
    state.choisePantone.rgb = msg.rgb;
    state.choisePantone.pantone = msg.pantone;
  },
  setPantoneBoxShow(state, msg) {
    state.pantoneBoxShow = msg;
  },
  setCanUndo(state, msg) {
    state.canUndo = msg;
  },
  setCanRedo(state, msg) {
    state.canRedo = msg;
  },
  addImageTimes(state, msg) {
    if (state.imageTimes[msg] === undefined) {
      Vue.set(state.imageTimes, msg, 1);
    } else {
      state.imageTimes[msg]++;
    }
  },
  subImageTimes(state, msg) {
    state.imageTimes[msg]--;
  },
  setChangeText(state, msg) {
    state.changeText = msg;
  },
  setTextObj(state, msg) {
    state.textObj[msg.key] = msg.value;
  },
  setColorTitle(state, msg) {
    state.colorTitle = msg;
  },
  setFontShow(state, msg) {
    state.fontShow = msg;
  },
  setOutlineShow(state, msg) {
    state.outlineShow = msg;
  },
  addPantoneData(state, msg) {
    state.pantoneData.push(msg);
  },
  addLatelyColor(state, msg) {
    var i = 0; var len = state.latelyColor.length;
    for (i; i < len; i++) {
      if (state.latelyColor[i].rgb === msg.rgb) {
        state.latelyColor.splice(i, 1);
        break;
      }
    }
    if (state.latelyColor.unshift({ rgb: msg.rgb, pantone: msg.pantone }) > 9) state.latelyColor.pop();
    localStorage.setItem('latelyColor', JSON.stringify(state.latelyColor));
  },
  setSmallScreen(state, msg) {
    state.smallScreen = msg;
  },
  setTitle(state, msg) {
    state.title = msg;
    if (state.shareUrl[state.shareUrl.length - 1] === '=') state.shareUrl += state.title;
  },
  setCanvasLoading(state, msg) {
    // console.log('=============');
    // console.log(s)
    // if (!msg && globalData.query.scene === 'shop' && globalData.query.bz_edit === '0') {
    //   state.categoriesTabShow = true;
    // }
    perFun(msg);
    state.canvasLoading = msg;
  },
  setShadeState(state, msg) {
    console.log(msg);
    console.log('设置setShadeState为：' + msg);
    state.shadeState = msg;
  },
  setShareUrl(state, msg) {
    state.shareUrl = window.globalData.base3 + '?designid=' + msg + '&title=';
    if (state.title) state.shareUrl += state.title;
  },
  setCommonColorBtn(state, msg) {
    state.commonColorBtn = msg;
  }
};

const actions = {
};
export default {
  namespaced: true,
  state,
  mutations,
  actions
};
